<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    canvas {
      border: 1px solid;
    }
  </style>
</head>

<body>
  <canvas id="myid" width="500" height="500"></canvas>
  <script>
    // 加载一张图片，然后通过画布绘制到页面上
    // 1.加载一张图片。2.加载图片需要时间，绘制图片的时候需要等图片加载完毕；

    // 1.加载图片的函数 src是图片地址 
    function loadImg (src, cb) {
      return new Promise((resolve, reject) => {
        // 创建一个img标签
        let imgEle = document.createElement("img");
        imgEle.src = src;
        // 如果图片加载完毕了，那么js里会执行一个onload事件
        imgEle.onload = function () {
          // 可以获取图片了，图片已经加载好了。
          console.log("图片加载完毕");
          cb && cb(imgEle);
          resolve(imgEle);
        }
        imgEle.onerror = function () {
          // 图片加载错误时执行；
          reject("图片加载失败");
        }
      })
    }
    // 2.绘制图片
    function drawImg (imgEle) {
      let canvas = document.querySelector("#myid") // 获取canvas画布
      let ctx = canvas.getContext("2d"); // 获取画布里的画笔，上下文
      ctx.drawImage(imgEle, 0, 0); // 把图片对象绘制到画布上
    }

    let imgurl = "https://img1.baidu.com/it/u=670407565,1107479233&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"

    // promise控制异步的执行顺序
    loadImg(imgurl).then((res) => {
      drawImg(res);
    }, (err) => {
      console.log(err);
    })
  </script>
</body>

</html>